<!-- 

初探和实现websocket心跳重连: http://www.cnblogs.com/1wen/p/5808276.html  

WebSocket实战之——JavaScript例子: http://www.cnblogs.com/tinywan/p/5894403.html

-->

<html>
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">
        #camera_errbox{
            width:320px; height:auto; border:1px solid #333333; padding:10px;
            color:#fff; text-align:left;margin:20px auto;
            font-size:14px;
        }
        #camera_errbox b{
            padding-bottom:15px;
        }
        
        </style>

    <style type="text/css">
        body{ background: #f8f8f8;}
        .show{margin-top: 20px; position: relative; width: 950px;}
        .show .item{position: absolute; width: 250px; height: 250px;}
        .show img{max-width: 224px;max-height: 224px;cursor: url(./images/big.cur), auto;  box-shadow: 0px 1px 1px 1px #AAA3A3;}
        .show img:hover{box-shadow: 0px 1px 1px 2px #83ABD2;}
        .show .big{z-index: 2;}
        .show .big img{max-width: none; max-height: none; cursor: url(./images/small.cur), auto;box-shadow: 2px 2px 10px 2px #666;}

    </style>

<script type="text/javascript">

// 文字信息
var ws = new WebSocket("ws://115.159.29.211:8000/websocket?room={{room}}&nick={{nick}}");

ws.onopen = function() {
	//alert('Web socket open');
};
ws.onmessage = function (evt) {	
	var a = evt.data.split(" ");
	b = '<a href="#zhidao" onclick="document.getElementById(\'user\').value=\'all\';">所有人</a> ';
    	if (a.length == 1) {
	        //此处收到服务器端发来的"XXX加入了聊天室"或者"XXX离开了聊天室"
        	document.getElementById('text').innerHTML += '<br>' + evt.data;        
	} else if (a[0] == 'NickList') {		
       		//此处收到服务器传来的当前聊天室所有用户列表信息
		for (i=1; i<a.length; i++) {
			b += '<a href="#zhidao" onclick="document.getElementById(\'user\').value=\'' + a[i] + '\';">' + a[i] + '</a> ';
		}
		document.getElementById('nickList').innerHTML = b;
	} else {
		// 用户发送的信息
		document.getElementById('text').innerHTML += '<br>' + evt.data;
	}
	window.location ="#zhidao";
};
function send() {
    	if (document.getElementById('chat').value != "") {
        	ws.send(document.getElementById('user').value + ' ' + document.getElementById('chat').value);
	}
    	document.getElementById('chat').value = '';
}

</script>

<script type="text/javascript">

//图片信息
var imgs = new WebSocket("ws://115.159.29.211:8000/imagesocket?room={{room}}&nick={{nick}}");

imgs.onopen = function() {
	//alert('Image socket open');
};
imgs.onmessage = function (evt) {	
	var a = evt.data.split(" ");
	document.getElementById('text').innerHTML += '<br>' + a[0] + '<br>';
	document.getElementById('text').innerHTML += '<img src="'+a[1]+'" alt="img" width="320" height="240">';
	window.location ="#zhidao";
};

</script>

</head>

<body>

<div id='text'></div>
<br><br><br>
当前聊天室(区分大小写)：<b>{{room}}</b>    当前用户: <b>{{nick}}</b>
<br><br>

所有用户:<div id="nickList" style=""></div>

<a name="zhidao"></a>

<br><br>
<input id='user' style="width:80px;height:30px" readonly="readonly" value="all">
<input id='chat' style="width:400px;height:30px"> <button onclick='send()'> Send </button>
<br><br>

    <div class="upload_box">
        <input id="upimg" multiple="" type="file" value='发送图片'>
    </div>
    <div class="show" id="show"></div>


                    <video id="video" autoplay="" src="" width="320" height="240"></video>

<br>
</body>
</html>

<script type="text/javascript">

var Upload = (function(){
    var upimg = document.getElementById('upimg');
    var show  = document.getElementById('show');

    function init(){
        if(!(window.FileReader && window.File && window.FileList && window.Blob)){
            show.innerHTML = '您的浏览器不支持fileReader';
            upimg.setAttribute('disabled', 'disabled');
            return false;
        }
        handler();
    }

    function handler(){
        upimg.addEventListener('change', function(e){
            var files = this.files;
            if(files.length){
                checkFile(this.files);
            }
        });

        show.addEventListener('click', function(e){
            var target = e.target;
            if(target.tagName.toUpperCase()=='IMG'){
                var parent = target.parentNode;
                var big = parent.className.indexOf('big')>=0;
                var item = this.childNodes;
                for(var i=0; i<item.length; i++){
                    item[i].className = 'item';
                    item[i].firstElementChild.style.cssText = '';
                }

                var parent = target.parentNode;
                if(!big){
                    // 点击放大
                    
                    target.style.cssText = 'width:'+target.naturalWidth+'px; height:'+target.naturalHeight+'px;'; // 关键
                    parent.className += ' big';
                }
            }
        }, false)
    }

    function checkFile(files){
        if (files.length != 0) {
            //获取文件并用FileReader进行读取
            var html = '';
            var i = 0, j = show.childElementCount;
            var funcs = function(){
                if(files[i]){
                    var x = parseInt((i+j)/4)*250;
                    var y = ((i+j)%4)*250;
                    var reader = new FileReader();
                    if(!/image\/\w+/.test(files[i].type)){
                        show.innerHTML = "请确保文件为图像类型";
                        return false;
                    }
                    reader.onload = function(e) {
                        imgs.send(document.getElementById('user').value + ' ' + e.target.result);
                        /*
                        html += '<div class="item" style="top:'+x+'px; left:'+y+'px;"><img src="'+e.target.result+'" alt="img"></div>'; */
                        i++;
                        funcs(); // onload为异步调用
                    };
                    reader.readAsDataURL(files[i]);
                }else{
                    show.innerHTML += html;
                }
            }
            funcs();
        }
    }
    return {
        init : init
    }
})();
Upload.init();
</script>
